<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="../css/jquery.plupload.queue.css">
<script type="text/javascript" src="../js/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="../js/jquery.plupload.queue.min.js"></script>
<script type="text/javascript" src="../js/plupload.min.js"></script>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/zh_CN.js"></script>
<style>
body {
	font-size: 12px;
}

body, p, div {
	padding: 0;
	margin: 0;
}

.wraper {
	padding: 30px 0;
}

.btn-wraper {
	text-align: center;
}

.btn-wraper input {
	margin: 0 10px;
}

#file-list {
	width: 350px;
	margin: 20px auto;
}

#file-list li {
	margin-bottom: 10px;
}

.file-name {
	line-height: 30px;
}

.progress {
	height: 4px;
	font-size: 0;
	line-height: 4px;
	background: orange;
	width: 0;
}

.tip1 {
	text-align: center;
	font-size: 14px;
	padding-top: 10px;
}

.tip2 {
	text-align: center;
	font-size: 12px;
	padding-top: 10px;
	color: #b00
}

#drag-area {
	border: 1px solid #ccc;
	height: 150px;
	line-height: 150px;
	text-align: center;
	color: #aaa;
	width: 600px;
	margin: 10px auto;
}

.catalogue {
	position: fixed;
	_position: absolute;
	_width: 200px;
	left: 0;
	top: 0;
	border: 1px solid #ccc;
	padding: 10px;
	background: #eee
}

.catalogue a {
	line-height: 30px;
	color: #0c0
}

.catalogue li {
	padding: 0;
	margin: 0;
	list-style: none;
}
</style>
</head>
<body>
	<div class="wraper">
		<p id="drag-area" style="position: relative;">把要上传的文件拖放到这里(请使用支持html5的浏览器)</p>
		<div class="btn-wraper" style="position: relative;">
			<input type="button" value="选择文件..." id="browse"
				style="position: relative; z-index: 1;"> <input
				type="button" value="开始上传" id="upload-btn">
			<div id="html5_1bgb6qqmri051ag3ec85pm1j873_container"
				class="moxie-shim moxie-shim-html5"
				style="position: absolute; top: 0px; left: 559px; width: 73px; height: 21px; overflow: hidden; z-index: 0;">
				<input id="html5_1bgb6qqmri051ag3ec85pm1j873" type="file"
					style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"
					multiple="" accept="">
			</div>
		</div>
		<ul id="file-list">

		</ul>
	</div>

	<div id="uploader">
		<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
	</div>
	<button id="toStop">暂停一下</button>
	<button id="toStart">再次开始</button>

	<script>
		var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
			browse_button : 'browse',
			url : 'upload.html',
			flash_swf_url : 'js/Moxie.swf',
			silverlight_xap_url : 'js/Moxie.xap',
			drop_element : 'drag-area'
		});
		uploader.init(); //初始化
		//绑定文件添加进队列事件
		uploader
				.bind(
						'FilesAdded',
						function(uploader, files) {
							for (var i = 0, len = files.length; i < len; i++) {
								var file_name = files[i].name; //文件名
								//构造html来更新UI
								var html = '<li id="file-' + files[i].id +'"><p class="file-name">'
										+ file_name
										+ '</p><p class="progress"></p></li>';
								$(html).appendTo('#file-list');
							}
						});

		//绑定文件上传进度事件
		uploader.bind('UploadProgress', function(uploader, file) {
			$('#file-' + file.id + ' .progress').css('width',
					file.percent + '%');//控制进度条
		});

		//上传按钮
		$('#upload-btn').click(function() {
			uploader.start(); //开始上传
		});
	</script>
</body>
</html>